<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Failed tasks - MaoXian</title>
    <link href="_base.css" rel="stylesheet"/>
    <link href="failed-tasks.css" rel="stylesheet"/>
  </head>
  <body>

    <div class="main">

      <h1> Failed tasks </h1>

      <div class="operations">
        <button id="retry-all" i18n="btn.retry-all"></button>
      </div>

      <div class="logs"></div>

      <br />
      <div class="notice-info" i18n="notice.intro"></div>
      <div class="batch-editor">
        <form>
          <label for="timeout" i18n="label.timeout"></label>
          <input type="number" id="timeout" min="5" max="86400" value="20" required/>
          <label for="tries" i18n="label.tries"></label>
          <input type="number" id="tries" min="1" max="99" value="3" required/>
          <button type="submit" id="adit-all" i18n="btn.edit-all"></button>
        </form>
      </div>
      <br />
      <br />
      <div class="tasks">
        <div class="details">
          <table>
            <thead>
              <tr>
                <td i18n="g.task.clipId"></td>
                <td i18n="g.task.filenameAndUrl"></td>
                <td i18n="g.task.timeout"></td>
                <td i18n="g.task.tries"></td>
                <td i18n="g.task.createdAt"></td>
                <td> - </td>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>

    </div>

    <template id="log-tpl">
      <div class="log">[<span class="${type}">${type}</span>]: ${taskFilename} <br />${errMsg}<div>
    </template>

    <template id="task-tpl">
      <tr>
        <td>${clipId}</td>
        <td>${filename}<br />${url}</td>
        <td>${timeout}</td>
        <td>${tries}</td>
        <td>${createdAt}</td>
        <td>
          <button class="remove" i18n="btn.remove" data-clip-id="${clipId}" data-filename="${filename}"></button>
        </td>
      </tr>
    </template>
    <template id="no-record-tpl">
      <tr><td colspan="20" i18n="g.hint.no-record" align="center"></td></tr>
    </template>


    <!-- scripts -->
    <script src="../vendor/js/browser-polyfill.js"></script>
    <script src="../vendor/js/i18n.js"></script>
    <script src="../_locales/en/common.js"></script>
    <script src="../_locales/en/failed-tasks.js"></script>
    <script src="../_locales/zh_CN/common.js"></script>
    <script src="../_locales/zh_CN/failed-tasks.js"></script>
    <script src="failed-tasks.js" type="module"></script>
  </body>
</html>
